<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>



		</style>
	</head>
	<body>

		<!-- 视图 -->


		<div id="app">
			
			<a href='http://www.baidu.com' @click.prevent="m1">百度</a>
			
			<button @click.oncess="click2">按钮</button>
			
			<div @click="clickout" style="height: 500px;border: solid 1px red;" >
					<div  @click="clickinner($event)"  style="margin-top:50px;border:solid 1px black; height:100px;width:100px">
						
						
					</div>
					
					<div  @click.stop="clickinner2($event)"  style="margin-top:50px;border:solid 1px black; height:100px;width:100px">
						
						
					</div>
			</div>
				

		</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					counter: 0

				},
				methods: {
					clickout: function(event) {
						console.log("外部被点击了")
					},
					clickinner: function(e) {
						console.log('内部被点击111');
						e.stopPropagation();//阻止事件冒泡
					},
					clickinner2: function(e) {
						console.log('内部被点击222');
					},
					m1:function(){
						console.log("超链接被点击了....")
					},
					click2:function(){
						console.log("按钮被点击.....")
					}
				}
			})
		</script>



	</body>
</html>
